<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<style>
    #i1{
        background-color: red;
        width: 200px;
        height: 100px;
    }
    #i2{
        background-color: chartreuse;
        width: 100px;
        height: 50px;
    }
</style>
<body>

<div id="i1">
    <div id="i2">

    </div>
</div>

<script>
    var myI1 = document.getElementById('i1')
    var myI2 = document.getElementById('i2')
// 改变true和false查看打印显示的顺序
    myI1.addEventListener('click',function () {
        console.log('i1')
    },true)
    myI2.addEventListener('click',function () {
        console.log('i2')
    },true)

</script>


</body>
</html>